<template>
  <cChart :option="chartOption"></cChart>
</template>

<script lang="ts" setup>
const local = useLocal()
//列表（父传子：接收）
const stayPeriodList: any = defineModel('stayPeriodList', { default: [] })
type DataItem = {
  hour: string;
  num: number;
  key: number;
  day: string;
};

type GroupedDataItem = {
  day: string;
  items: DataItem[];
};


function groupAndSortData(stayPeriodList: DataItem[]): GroupedDataItem[] {
  // 使用对象来分组数据
  const groupedData: { [key: string]: DataItem[] } = {};

  // 遍历数据数组
  stayPeriodList.forEach((item: DataItem) => {
    // 如果这一天还没有被记录，则创建一个新的数组
    if (!groupedData[item.day]) {
      groupedData[item.day] = [];
    }
    // 将当前项添加到对应天的数组中
    groupedData[item.day].push(item);
  });

  // 对每个分组进行排序
  for (const day in groupedData) {
    groupedData[day].sort((a: DataItem, b: DataItem) => parseInt(a.hour, 10) - parseInt(b.hour, 10));
  }

  // 将排序后的分组数据转换为数组形式
  const sortedGroupedData: GroupedDataItem[] = Object.keys(groupedData).map((day: string) => ({
    day: day,
    items: groupedData[day]
  }));

  // 按天进行排序，以确保输出顺序
  sortedGroupedData.sort((a: GroupedDataItem, b: GroupedDataItem) => a.day.localeCompare(b.day));

  return sortedGroupedData;
}

const list = computed(() => {
  return groupAndSortData(stayPeriodList.value)
})
const data: any = ref({
  title: [],
  singleAxis: [],
  series: []
})
useWatchEffect(() => {
  let title: any = []
  let singleAxis: any = []
  let series: any = []
  list.value.forEach(function (day: any, idx: any) {
    title.push({
      textBaseline: 'top',
      top: ((idx + 0.5) * 100) / 5 + '%',
      text: day.day,
      textStyle: {
        color: local.theme == 'light' ? '#222222' : '#ffffff',
        fontSize: 12,
        fontWeight: 'normal',
      },
    });
    singleAxis.push({
      left: 60,
      type: 'category',
      boundaryGap: false,
      data: day.items.map((item: any) => item.hour).filter((_: any, i: any) => i < 24),
      top: (idx * 100) / 5 + 2 + '%',
      height: 100 / 5 - 10 + '%',
      axisLabel: {
        interval: 2,
        show: true,
        showMinLabel: false,
        // 不显示最大值标签
        showMaxLabel: true,
        // 不显示其他标签
        // interval: 0,
        textStyle: {
          color: local.theme == 'light' ? '#222222' : '#ffffff',
          fontSize: 12,
          fontWeight: 'normal',
        },
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: local.theme == 'light' ? 'rgba(0,0,0,0.2)' : 'rgba(255, 255, 255, 0.2)',
          type: 'dashed',
          width: 1,
        }
      }
    });
    series.push({
      singleAxisIndex: idx,
      coordinateSystem: 'singleAxis',
      type: 'scatter',
      data: day.items.map((item: any, index: any) => {
        // return [index,item.num || Math.random()*10]
        return [index, item.num]
      }),
      // data: [],
      symbolSize: function (dataItem: any) {
        if(dataItem[1] < 500 && dataItem[1]  >= 1) return 10;
        if(dataItem[1] < 1000 && dataItem[1] >= 500) return 20;
        if(dataItem[1] < 1500 && dataItem[1] >= 1000) return 30;
        if(dataItem[1] < 2000 && dataItem[1] >= 1500) return 40;
        if(dataItem[1] >= 2000) return 50;
        return 0;
      },
      // 设置视觉映射
      visualMap: {
        type: 'continuous',
        min: Math.min(...day.items.map((item:any)=>item.num)),
        max: Math.max(...day.items.map((item:any)=>item.num)),
        calculable: true,
        inRange: {
          symbolSize: [1, 5],

        }
      }
    });
  });
  data.value.title = title
  data.value.singleAxis = singleAxis
  data.value.series = series
})
const { chartOption } = useChartOption(() => {
  return {
    grid: {
      left: 20,
      width: '100%',
      height: '100%',
    },
    tooltip: {
      position: 'top',
      formatter: '{c0}架'
    },
    color: ['#6C63F0', '#3AACFF', '#ED589D', '#FB466C', '#405DF9'],
    title: data.value.title,
    singleAxis: data.value.singleAxis,
    series: data.value.series
  }
});
</script>

<style scoped lang="less"></style>